<template>
  <el-menu
    :default-active="$route.path"
    background-color="#304156"
    text-color="#fff"
    :router="true"
  >
    <sidebar-item
      v-for="(router, index) in routes"
      :key="index"
      :item="router"
    />
  </el-menu>
</template>

<script>
import SidebarItem from "./SidebarItem";
export default {
  name: "Sidebar",
  data() {
    return {
      routes: []
    };
  },
  components: { SidebarItem },
  created() {
    this.getRoute();
  },
  methods: {
    getRoute() {
      const routes = this.$router.options.routes;
      this.routes = routes;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-menu {
  border: none;
  /deep/.el-submenu__title {
    height: 40px;
    line-height: 40px;
    .fa {
      width: 1.125em;
      color: #bfcbd9;
    }
  }
  /deep/.el-menu-item {
    height: 40px;
    line-height: 40px;
    .fa {
      width: 1.125em;
      color: #bfcbd9;
    }
  }
}
</style>
